<template>
  <div>
    <div class="wrap">
      <input type="text" class="form-control" v-model="value">
      <button class="btn" type="button" @click="handleAdd">添加</button>
    </div>

    <List :list="list"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import List from './List.vue'

const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')

const handleAdd = () => {
  list.value.push(value.value)
  value.value = ''
}
</script>

<style>
.wrap{
  margin-bottom: 20px;
  width: 270px;
}
.wrap .form-control{
  height: 30px;
  width: 200px;
}
.btn{
  height: 36px;
  width: 50px;
  margin-left: 10px;
  background: rgb(30, 141, 214);
  border-radius: 2px;
  /* border: none; */
  border-color: rgb(30, 141, 214);
  color: #fff;
  cursor: pointer;
}
</style>
